<template lang="pug">
  .container
    .btn-types
      el-radio-group(v-model="checkType")
        el-radio-button(v-for="(item, index) in btns" :key="index" :label="item.type" :name="item.name") {{item.name}}
      //- el-button(type="primary" v-for="(item, index) in btns" :key="index") {{item.name}}
    .content-pannel
      el-input(style="width: 300px" v-model="longitude" placeholder="请输入经度")
      el-input(style="width: 300px;margin-left: 20px;" v-model="latitude" placeholder="请输入纬度")
    el-button.btn-change(@click="clickChange" type="primary") 切换
    .result-pannel
      .lon 经度: {{resultLonLat.longitude || 0}}
      .lat 纬度: {{resultLonLat.latitude || 0}}
</template>

<script>
const enumTypeMapChange = {
  BAIDUTOGAODE: 1,
  GAODETOBAIDU: 2
}
export default {
    data() {
      return {
        longitude: '',
        latitude: '',
        checkType: enumTypeMapChange.BAIDUTOGAODE,
        resultLonLat: {},
        btns: [
          {
            name: '百度转高德',
            type: enumTypeMapChange.BAIDUTOGAODE
          },
          {
            name: '高德转百度',
            type: enumTypeMapChange.GAODETOBAIDU
          }
        ]
      }
    },
    methods: {
      clickChange() {
        let type = this.checkType
        switch(type) {
          case enumTypeMapChange.BAIDUTOGAODE:
            this.resultLonLat = this.bdToGd(this.longitude, this.latitude)
            break;
          case enumTypeMapChange.GAODETOBAIDU:
            this.resultLonLat = this.gdToBd(this.longitude, this.latitude)
            break;
        }
      },
      // 百度转高德坐标
      bdToGd(lon, lat) {
        let bd_lon = lon
        let bd_lat = lat
        var X_PI = Math.PI * 3000.0 / 180.0;
        var x = bd_lon - 0.0065;
        var y = bd_lat - 0.006;
        var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
        var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
        var gg_lon = z * Math.cos(theta);
        var gg_lat = z * Math.sin(theta);
        return {
            longitude: gg_lon,
            latitude: gg_lat
        }
      },
      // 高德转百度坐标
      gdToBd(lon, lat) {
        let gg_lon = lon
        let gg_lat = lat
        var X_PI = Math.PI * 3000.0 / 180.0;
        var x = gg_lon, y = gg_lat;
        var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
        var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
        var bd_lon = z * Math.cos(theta) + 0.0065;
        var bd_lat = z * Math.sin(theta) + 0.006;
        return {
            latitude: bd_lat,
            longitude: bd_lon
        };
      }
    }
}
</script>


<style lang="scss" scoped>
.container {
  padding: 20px;
  .content-pannel {
    margin-top: 20px;
  }
  .btn-change {
    margin-top: 20px;
  }
  .result-pannel {
    margin-top: 40px;
    .lat {
      margin-top: 10px;
    }
  }
}
</style>
